<template>
	<div style="text-align: center;">
		<h2>你好！{{ userInfo.username }} 同学</h2>

			<el-form :model="editForm" :rules="editFormRules" ref="editForm">
				<el-form-item label="用户名" prop="username" label-width="100px">
					<el-input v-model="editForm.username" autocomplete="off" :disabled="true"></el-input>
					<el-alert
							title="初始密码为888888"
							:closable="false"
							type="info"
							style="line-height: 12px;"
					></el-alert>
				</el-form-item>

				<el-form-item label="手机号"  prop="phone" label-width="100px">
					<el-input v-model="editForm.phone" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="身高(cm)"  prop="height" label-width="100px">
					<el-input v-model="editForm.height" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="体重(kg)"  prop="weight" label-width="100px">
					<el-input v-model="editForm.weight" autocomplete="off"></el-input>
				</el-form-item>

			</el-form>

			<h2>会员信息</h2>

			<el-form :model="rechargeForm" :rules="rechargeFormRules" ref="rechargeForm">
				<el-form-item label="会员卡号"  prop="id" label-width="100px">
					{{rechargeForm.id}}
				</el-form-item>

				<el-form-item label="会员卡级别"  prop="level" label-width="100px">
					{{rechargeForm.level}}
				</el-form-item>

				<el-form-item label="会员卡余额"  prop="balanceOld" label-width="100px">
					{{balanceOld}}
				</el-form-item>

				<el-form-item label="办卡时间"  prop="created" label-width="100px">
					{{formatDate(rechargeForm.created)}}
				</el-form-item>

				<el-form-item label="到期时间"  prop="deadlineDate" label-width="100px">
					{{formatDate(rechargeForm.deadlineDate)}}
				</el-form-item>

				<el-form-item label="充值金额"  prop="balance" label-width="100px">
					<el-input v-model="rechargeForm.balance" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>


			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm('editForm')">确 定</el-button>
				<el-button type="primary" @click="rechargeHandle('rechargeForm')">充 值</el-button>
			</div>

			
	</div>

	
</template>

<script>
	var padDate = function (value) {
		return value <10 ? '0' + value:value;
	};
	export default {
		name: "Login",
		data() {
			
			return {
				userInfo: {

				},
				editForm: {
					
				},
				rechargeForm: {

				},
				editFormRules: {
					username: [
						{required: true, message: '请输入用户名称', trigger: 'blur'}
					],
					email: [
						{required: true, message: '请输入邮箱', trigger: 'blur'}
					],
					statu: [
						{required: true, message: '请选择状态', trigger: 'blur'}
					]
				},
				rechargeFormRules: {
					balance: [
						{required: true, message: '请输入充值金额', trigger: 'blur'}
					],
				},
				cardId: '',
				balanceOld: ''
			}
		},
		created() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				this.$axios.get("/sys/userInfo").then(res => {

					this.userInfo = res.data.data;
					this.initHandle(this.userInfo.id);
				})
			},
			initHandle(id) {
				this.$axios.get('/sys/user/info/' + id).then(res => {
					this.editForm = res.data.data
					this.$axios.get('/sys/card/info/' + this.editForm.cardId).then(res => {
						this.rechargeForm = res.data.data
						this.balanceOld = this.rechargeForm.balance
						this.rechargeForm.balance = ''
					})
				})
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.editForm = {}
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$axios.post('/sys/user/' + (this.editForm.id?'update' : 'save'), this.editForm)
							.then(res => {

								this.$message({
									showClose: true,
									message: '恭喜你，操作成功',
									type: 'success',
									onClose:() => {
										this.getUserInfo()
									}
								});
							})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			// 时间格式方法
			formatDateTime(row, column) {
				// 获取单元格数据
				let data = row[column.property]
				if(data == null) {
					return null
				}
				let dt = new Date(data)
				return dt.getFullYear() + '-' + padDate(dt.getMonth() + 1) + '-' + padDate(dt.getDate()) + ' ' + padDate(dt.getHours()) + ':' + padDate(dt.getMinutes()) + ':' + padDate(dt.getSeconds())
			},
			// 日期格式方法
			formatDate(date) {
				let dt = new Date(date)
				return dt.getFullYear() + '-' + padDate(dt.getMonth() + 1) + '-' + padDate(dt.getDate())
			},
			rechargeHandle(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$axios.post('/sys/card/recharge', this.rechargeForm)
							.then(res => {

								this.$message({
									showClose: true,
									message: '恭喜你，充值成功',
									type: 'success',
									onClose:() => {
										this.getUserInfo()
									}
								});
							})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},

		}
	}
</script>

<style scoped>
.el-form {
	width: 420px;
	margin: 50px auto;
}
</style>